<template>
    <div>
        <div>
            <el-form ref="formRef" class="mb-[-16px]" :inline="true" style="float: right;">
                <el-form-item label="我方文号">
                    <el-input class="w-[280px]" />
                </el-form-item>
                <el-form-item label="申请号">
                    <el-input class="w-[280px]" />
                </el-form-item>
                <el-form-item label="客户名称">
                    <el-input class="w-[280px]" />
                </el-form-item>
                <el-form-item label="案件名称">
                    <el-input class="w-[280px]" />
                </el-form-item>
                <el-form-item label="内部期限" prop="officialDate">
                    <el-date-picker v-model="officialDate" type="datetimerange" start-placeholder="开始日期"
                        end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                        time-format="A hh:mm:ss" />
                </el-form-item>
                <el-form-item label="客户期限" prop="officialDate">
                    <el-date-picker v-model="officialDate" type="datetimerange" start-placeholder="开始日期"
                        end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                        time-format="A hh:mm:ss" />
                </el-form-item>
                <el-form-item label="官方期限" prop="officialDate">
                    <el-date-picker v-model="officialDate" type="datetimerange" start-placeholder="开始日期"
                        end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                        time-format="A hh:mm:ss" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="allotAll = true" type="primary" plain>批量分配（统一）</el-button>
                    <el-button @click="allotSolo = true" type="primary" plain>批量分配（单独）</el-button>
                    <el-button @click="refer" type="primary" plain>批量提交</el-button>
                    <el-button @click="transfer" type="primary" plain>批量移交</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table class="" style="padding-top: 10px;" size="large" :data="queryParams" stripe>
            <el-table-column type="selection" width="55" />
            <el-table-column label="编号" prop="id" min-width="100" />
            <el-table-column property="" label="转出类型" width="120" />
            <el-table-column property="ourRef" label="我方文号" width="120">
                <template #default="{ row }">
                    <router-link style="color: #409eff" :to="{
                        path: getRoutePath('docketItrm:details'),
                        query: {
                            id: row.id
                            // type: 'addlist'
                        }
                    }">
                        {{ row.ourRef }}
                    </router-link>
                </template>
            </el-table-column>

            <el-table-column property="titleCause" label="案件名称" width="120" />
            <el-table-column property="client" label="客户名称" width="120" />
            <el-table-column property="" label="客户代码" width="120" />
            <el-table-column property="" label="客户文号" width="120" />
            <el-table-column property="" label="申请类型" width="120" />
            <el-table-column property="handlingInformation" label="处理事项" width="120" />
            <el-table-column property="transactionHandler" label="处理人" width="120" />
            <el-table-column property="officialDate" label="官方期限" width="120" />
            <el-table-column property="wearLife" label="内部期限" width="120" />
            <el-table-column property="customerPeriod" label="客户期限" width="120" />
            <el-table-column property="filingDate" label="配案状态" width="120" />
        </el-table>
        <div class="flex justify-end mt-4">
            <pagination v-model="pager" @change="getLists" />
        </div>
        <!-- 弹窗 -->
        <!-- 统一分配 -->
        <el-dialog v-model="allotAll" title="选择处理人" :model="queryParams" width="1000px">
            <el-form ref="formRef" class="mb-[-16px]" :inline="true" style="float: right;">
                <el-form-item label="处理人" required prop="transactionHandler">
                    <el-select v-model="queryParams.transactionHandler" placeholder="请选择" style="width: 280px;">
                        <el-option value="处理人1" />
                        <el-option value="处理人2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="对外处理人" prop="handlingPerson">
                    <el-select v-model="queryParams.handlingPerson" placeholder="请选择" style="width: 280px;">
                        <el-option value="处理人1" />
                        <el-option value="处理人2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="内部期限" prop="wearLife">
                    <el-date-picker v-model="queryParams.wearLife" type="datetime" clearable placeholder="选择内部期限"
                        value-format="YYYY-MM-DD hh:mm:ss" />
                </el-form-item>
                <el-form-item label="客户期限" prop="customerPeriod">
                    <el-date-picker v-model="queryParams.customerPeriod" type="datetime" clearable placeholder="选择客户期限"
                        value-format="YYYY-MM-DD hh:mm:ss" />
                </el-form-item>
                <el-form-item label="专利标签" prop="patentLabel">
                    <el-select v-model="queryParams.patentLabel" placeholder="请选择" style="width: 280px;">
                        <el-option value="分案" />
                        <el-option value="一般案件" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input class="w-[280px]" type="textarea" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div>
                    <el-button @click="allotAll = false">取消</el-button>
                    <el-button type="primary" @click="allotAll = false">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 单独分配 -->
        <el-dialog v-model="allotSolo" title="选择处理人" :model="queryParams" width="1000px">
            <el-table :data="queryParams" style="width: 100%" stripe>
                <el-table-column prop="ourRef" label="案号"></el-table-column>
                <el-table-column prop="handlingInformation" label="处理事项"></el-table-column>
                <el-table-column prop="count" label="处理人">
                    <template #default="{ row, column }">
                        <el-select v-model="row.transactionHandler" @input="handleInput(row, column)" placeholder="请选择"
                            style="width: 100px;">
                            <el-option value="处理人1" />
                            <el-option value="处理人2" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="处理人点数">
                    <template #default="{ row, column }">
                        <el-input class="w-[100px]" />
                    </template>
                </el-table-column>
                <el-table-column prop="handlingPerson" label="对外处理人">
                    <template #default="{ row, column }">
                        <el-select v-model="row.handlingPerson" @input="handleInput(row, column)" placeholder="请选择"
                            style="width: 100px;">
                            <el-option value="处理人1" />
                            <el-option value="处理人2" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="handlingPerson" label="核稿人员">
                    <template #default="{ row, column }">
                        <el-select v-model="row.handlingPerson" @input="handleInput(row, column)" placeholder="请选择"
                            style="width: 100px;">
                            <el-option value="人1" />
                            <el-option value="人2" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="核稿人点数">
                    <template #default="{ row, column }">
                        <el-input class="w-[100px]" />
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="allotSolo = false">
                        确认
                    </el-button>
                    <el-button @click="allotSolo = false">取消</el-button>

                </div>
            </template>

        </el-dialog>
    </div>
</template>

<script setup>
import { getRoutePath } from '@/router'
const allotAll = ref(false)
const allotSolo = ref(false)
const queryParams = reactive([
    {
        id: 1,
        date: '开卷日期',
        patentLabel: '专利标签',
        ourRef: '11de232',
        titleCause: '案件名称',
        handlingInformation: '处理事项',
        processState: '处理状态',
        applicationType: '申请类型',
        filingDate: '',
        officialDate: '官方期限',
        wearLife: '内部期限',
        customerPeriod: '客户期限',
        caseClerk: '案件业务员',
        pretrialCase: '预审案件',
        priorityReview: '',
        applicat: '申请人',
        client: '客户',
        handlingPerson: '',
        transactionHandler: '',
    }
])
</script>

<style scoped>
:deep(.el-input__wrapper) {
    width: 280px;
}

.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #cacaca;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

.table-td {
    text-align: center;
}
</style>
